<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title data-i18n="resources.title_websymbol_ChinaProvinceCapitals"></title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }

  </style>
</head>

<body>
  <div id="map"></div>
  <script type="text/javascript"  include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var serviceUrl = host + "/iserver/services/map-china/rest/maps/China";
    var map = new mapboxgl.Map({
      container: "map",
      style: {
        "glyphs": serviceUrl + "/tileFeature/sdffonts/{fontstack}/{range}.pbf",
        "sources": {
          "china": {
            "tiles": [
              serviceUrl + "/tileFeature.mvt?returnAttributes=true&z={z}&x={x}&y={y}"
            ],
            "type": "vector"
          },
          "raster-tiles": {
            "tiles": [
              serviceUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}"
            ],
            "type": "raster"
          }
        },
        "name": "中国省会地理位置",
        "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "raster-tiles"
        }],
        "version": 8
      },
      zoom: 5.5,
      center: [108, 35],
    });


    var createConsumptionLevel = function (symbolId) {
      map.addLayer({
        "id": "ProvinceCapital_P@China#point",
        "source": "china",
        "source-layer": "ProvinceCapital_P@China",
        "type": "symbol",
        "symbol": symbolId,
        "layout": {
          "icon-size": 0.8
        }
      });
    };

    map.on("load", function () {
      // 配置基础路径
      new mapboxgl.supermap.WebSymbol().init({basePath: window.exampleWebSymbolBasePath});
      var symbolId = "point-909063";
      map.loadSymbol(symbolId, function (error, symbol) {
        if (error) {
          widgets.alert.showAlert(resources.msg_addWebSymbolFailed, false);
          return;
        }
        map.addSymbol(symbolId, symbol);
        createConsumptionLevel(symbolId);
      });
    });

  </script>
</body>

</html>
